// 该文件用于创建整个应用的路由器
import VueRouter from 'vue-router'

import About from '@/pages/About'
import Home from '@/pages/Home'
import Message from '@/pages/Message'
import News from '@/pages/News'
import Deatil from '@/pages/Detail'


// 创建并暴露一个路由器
export default new VueRouter({
    routes:[
        {   
            path:"/about",
            component:About
        },
        {
            path:'/home',
            component:Home,
            // 子级目录
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    // 注意子级目录不需要加 / !!!!!
                    path:'message',
                    component:Message,
                    children:[
                        {
                            // 命名路由，可以直接 :to="{name = "xiangqing"}"
                            name:'xiangqing',
                            // 使用 Params 参数时，使用占位声明接收 params 参数
                            path:'detail',
                            component:Deatil,
                            // props 的第一种写法，值为对象，该对象中的所有key-value 都会一props的形式传给Detatil组件
                            // props:{a:1,b:'Hello'}

                            // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有 params参数，以props的形式传给Detail组件
                            // props:true

                            // props的第三种写法，值为函数
                            props($route){
                                return {
                                    id : $route.query.id,
                                    title:$route.query.title
                                }
                            }


                        }
                    ]
                },
            ]
        },
    ]
})
